﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="lib/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />

<script type="text/javascript" src="lib/raphael.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="myflow.js"></script>
<script type="text/javascript" src="myflow.jpdl4.js"></script>

<script type="text/javascript">

$(function(){
	$('#myflow').myflow({basePath : "",
	restore:({
		states:
		{
			rect4:{type:'start',text:{text:'开始'}, attr:{ x:507, y:63, width:50, height:50}, props:{text:{value:'开始'},temp1:{value:''},temp2:{value:''}}},
			rect5:{type:'state',text:{text:'状态2'}, attr:{ x:487, y:284, width:100, height:50}, props:{text:{value:'状态2'},temp1:{value:''},temp2:{value:''}}},
			rect6:{type:'task',text:{text:'任务1'}, attr:{ x:311, y:284, width:100, height:50}, props:{text:{value:'任务1'},temp1:{value:''},temp2:{value:''}}},
			rect7:{type:'task',text:{text:'任务3'}, attr:{ x:675, y:287, width:100, height:50}, props:{text:{value:'任务3'},temp1:{value:''},temp2:{value:''}}},
			rect8:{type:'fork',text:{text:'分支'}, attr:{ x:509, y:176, width:50, height:50}, props:{text:{value:'分支'},temp1:{value:''},temp2:{value:''}}},
			rect9:{type:'join',text:{text:'合并'}, attr:{ x:517, y:398, width:50, height:50}, props:{text:{value:'合并'},temp1:{value:''},temp2:{value:''}}},
			rect10:{type:'end',text:{text:'结束'}, attr:{ x:519, y:517, width:50, height:50}, props:{text:{value:'结束'},temp1:{value:''},temp2:{value:''}}}
		},
		paths:
		{
			path11:{from:'rect4',to:'rect8', dots:[],text:{text:'TO 分支'},textPos:{x:32,y:-5}, props:{text:{value:''}}},
			path12:{from:'rect8',to:'rect5', dots:[],text:{text:'TO 状态2'},textPos:{x:27,y:-5}, props:{text:{value:''}}},
			path13:{from:'rect5',to:'rect9', dots:[],text:{text:'TO 合并'},textPos:{x:23,y:-8}, props:{text:{value:''}}},
			path14:{from:'rect9',to:'rect10', dots:[],text:{text:'TO 结束'},textPos:{x:27,y:-10}, props:{text:{value:''}}},
			path15:{from:'rect8',to:'rect6', dots:[],text:{text:'TO 任务1'},textPos:{x:-20,y:-11}, props:{text:{value:''}}},
			path16:{from:'rect6',to:'rect9', dots:[],text:{text:'TO 合并'},textPos:{x:6,y:-10}, props:{text:{value:''}}},
			path17:{from:'rect8',to:'rect7', dots:[],text:{text:'TO 任务3'},textPos:{x:16,y:-13}, props:{text:{value:''}}},
			path18:{from:'rect7',to:'rect9', dots:[],text:{text:'TO 合并'},textPos:{x:31,y:7}, props:{text:{value:''}}}
		}
	}),
		editable:false,
							activeRects : {// 当前激活状态
								rects : [{name:'任务1',paths:[]}]
							},
							historyRects : {// 历史激活状态
								rects : [{name:'开始',paths:['TO 分支']},{name:'分支',paths:['TO 任务1']},{name:'任务1',paths:[]}]
							}});
	
});
</script>
<style type="text/css">
body {
  margin : 0;
  pading: 0;
  text-align: left;
  font-family: Arial, sans-serif, Helvetica, Tahoma;
  font-size: 12px;
  line-height: 1.5;
  color: black;
  background-image: url(img/bg.png);
}

.node {
	width : 70px;
	text-align : center;
	vertical-align:middle;
	border: 1px solid #fff;
}

.mover{
	border: 1px solid #ddd;
	background-color: #ddd;
}
.selected{
	background-color: #ddd;
}
.state{}

#myflow_props table{
	
}
#myflow_props th {
	letter-spacing: 2px;
	text-align: left;
	padding: 6px;
	background: #ddd;
} 
#myflow_props td {
	background: #fff;
	padding: 6px;
} 

#pointer {
	background-repeat:no-repeat;
	background-position:center;
	
}
#path {
	background-repeat:no-repeat;
	background-position:center;
	
}
#task{
	background-repeat:no-repeat;
	background-position:center;
	
}
#state{
	background-repeat:no-repeat;
	background-position:center;
	
}
</style>
</head>
<body >

<div id="myflow">

</div>
</body>
</html>